import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";

// 路由的懒加载（按需加载 有缓存）
const Login = () => import('@/pages/Login')
const Home = () => import('../../public/images')
const Register = () => import('@/pages/Register')
const Search = () => import('@/pages/Search')
const Detail = () => import('@/pages/Detail')
const AddCartSuccess = () => import('@/pages/AddCartSuccess')
const ShopCart = () => import('@/pages/ShopCart')
const Trade = () => import('@/pages/Trade')
const Pay = () => import('@/pages/Pay')
const PaySuccess = () => import('@/pages/PaySuccess')
const Center = () => import('@/pages/Center')
const MyOrder = () => import('@/pages/Center/components/MyOrder')
const GroupOrder = () => import('@/pages/Center/components/GroupOrder')

// 应用路由插件
Vue.use(VueRouter)

// 重写push和replace方法 解决 编程式导航 重复点击 报失败promise错的问题（原因：没有人处理）
const OldPush = VueRouter.prototype.push;
// console.log(VueRouter.prototype.push)
VueRouter.prototype.push = function (location, onComplete = () => {
}, onAbort = () => {
}) {
	OldPush.call(this, location, onComplete, onAbort)
}
const OldReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location, onComplete = () => {
}, onAbort = () => {
}) {
	OldReplace.call(this, location, onComplete, onAbort)
}
const router = new VueRouter({
	mode: 'history',  // 设置路由模式
	routes: [  // 配置路由表
		{
			path: '/Login',
			name: 'Login',
			component: Login,
			meta: {
				isHidden: true
			}
		},
		{
			path: '/Home',
			name: 'Home',
			component: Home
		},
		{
			path: '/Register',
			name: 'Register',
			component: Register,
			meta: {
				isHidden: true
			}
		},
		{
			path: '/Search/:searchKey?',
			name: 'Search',
			component: Search
		},
		{
			path: '/Details/:skuId',
			name: 'Details',
			component: Detail
		},
		{
			path: '/AddCartSuccess',
			name: 'AddCartSuccess',
			component: AddCartSuccess
		},
		{
			path: '/ShopCart',
			name: 'ShopCart',
			component: ShopCart
		},
		{
			path: '/Trade',
			name: 'Trade',
			component: Trade,
			beforeEnter: (to, from, next) => {
				// from 来这个路由  的之前的路由信息
				if (from.name !== 'ShopCart') return next('/ShopCart')
				next()
			}
		},
		{
			path: '/Pay',
			name: 'Pay',
			component: Pay,
			beforeEnter: (to, from, next) => {
				// from 来这个路由  的之前的路由信息
				if (from.name !== 'Trade') return next('/Trade')
				next()
			}
		},
		{
			path: '/PaySuccess',
			name: 'PaySuccess',
			component: PaySuccess,
			beforeEnter: (to, from, next) => {
				// from 来这个路由  的之前的路由信息
				if (from.name !== 'Pay') return next('/Pay')
				next()
			}
		},
		{
			path: '/Center',
			// name: 'Center',
			component: Center,
			redirect: '/Center/MyOrder',
			children: [
				{
					path: 'MyOrder',
					name: 'MyOrder',
					component: MyOrder,
				},
				{
					path: 'GroupOrder',
					name: 'GroupOrder',
					component: GroupOrder,
				},
			]
		},
		{
			path: '/',
			redirect: '/Home'
		}
	],
	scrollBehavior() { // 自定义路由切换时页面的滚动。
		// return 期望滚动到哪个的位置
		return {x: 0, y: 0}
	}
})

const whilePath = [
	"Login",
	"Home",
	"Register",
	"Search",
	"Detail",
	"AddCartSuccess",
]
// 配置token校验（实现免登录功能）
router.beforeEach(async (to, form, next) => {
	// console.log(to, form, next);
	// 判断用户浏览网页时  是否登录
	const token = store.state.user.token;
	if (token) {  // 已经登录
		if (to.name === 'Login') {  // 登录了不能去Login页
			next('/Home')
		} else {
			const nickName = !!store.state.user.userInfo.nickName;
			if (nickName) {  // 有token还不够 必须还需要有 用户信息才能去任意页面
				next()
			} else {
				try {
					// 没有用户信息就获取用户信息
					await store.dispatch('user/getUserInfo');
					next()
				} catch (e) { // 获取用户信息出错 可能token过期
					alert(e.message)
					await store.dispatch('user/deleteUserInfo');
					// 用户在登录前 可能有想去的页面 登录成功后直接跳转过去会比较好
					next(`/Login?to=${to.name}`)
				}
			}
		}
	} else { // 没有登录
		// 因为游客可以去很多页面
		if (whilePath.includes(to.name)) {
			next()
		} else {
			// 用户在登录前 可能有想去的页面 登录成功后直接跳转过去会比较好
			next(`/Login?to=${to.name}`)
		}
	}
})

export default router